// pages/recommendSong/recommendSong.js
import Pubsub from 'pubsub-js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 用于控制页面显示的月份
    month:"--",

    // 用于控制页面显示的日期
    day:"--",

    // 用于存储当前页面的推荐歌曲列表
    recommendList:[]
  },

  toSong(event){
    // console.log(event.currentTarget.dataset)
    const song = event.currentTarget.dataset.song;
    // console.log(1,song.id)
    // 小程序只支持query传参,query传参是URL传参的一员
    // URL传参是有长度限制的,不能传递太大的数据
    // 注意:query传参会将传递的数据全部变成字符串类型,一定要注意
    wx.navigateTo({
      url: '/qwer/pages/song/song?songId=' + song.id,
    })

    // 注意: pubsub回调中: 参数一是消息类型,参数二是传递的参数
    Pubsub.subscribe('currentSongId', (messageType, data) => {
      const { operate, songId } = data; // 拿到操作和当前的 songId

      // 找到当前歌曲的下标
      let index = this.data.recommendList.findIndex(item => item.id == songId);

      if (operate == 'prev') {
        index = index == 0 ? this.data.recommendList.length - 1 : index - 1; // 注意边界
      } else if (operate == 'next') {
        index = index == this.data.recommendList.length - 1 ? 0 : index + 1; // 注意边界
      }
      // 拿到新的歌曲再次传递给 歌曲播放页面
      const newSong = this.data.recommendList[index]; // 拿到新的歌曲
      
      Pubsub.publish('newSongId', { newSongId: newSong.id })

    })


    // 总结的通信方式:
    // 1. query传参
    // wx.navigateTo({
    //   url: '/pages/song/song?songId=' + song.id,
    // })
    // 2. storage传参
    // wx.setStorageSync('songId', song.id);
    // 3. app 实例传参
    // const app = getApp();
    // app.songId = song.id;
    // 4. 事件通道
    // wx.navigateTo({
    //   url: '/pages/song/song',
    //   success: (res) => {
    //     // res.eventChannel -> 事件通道,为什么在success回调中拿事件通道?
    //     // 因为下一个页面一定要创建出来,事件通道传参才有意义
    //     res.eventChannel.emit('sendSongId', song.id)
    //   }
    // })


    // 问题: 歌曲列表页 跳转到 歌曲播放页(歌曲详情页),传参有几种方式?
    // 问题本质: 小程序页面之间的传参有哪些?(面试题)
    // 1. wx.navigateTo() 跳转页面通过 query 传参
    // 2. storage
    //    wx.setStorageSync(key, value) // 将参数放到 storage 中
    //    wx.getStorageSync(key) // 将参数从storage中取出来
    // 3. 通过 app 实例传参
    //    思路: 获取到整个应用的app实例(是一个对象),把参数挂在这个对象上,然后跳转页面,当跳转完毕之后,再从这个对象上获取到刚刚跳转之前挂的参数
    //    步骤:
    //      3.1 在跳转之前 通过 getApp() 获取到app实例,在实例上挂上参数
    //      3.2 在跳转之后 通过 getApp() 获取到app实例,在实例上获取到参数
    // 4. 事件通道
    //  eventChannel 事件通道 用于 和被打开页面进行通信
    //  步骤:
    //    4.1 在 navigateTo 的 success 回调中,通过参数可以拿到事件通道,事件通道去触发事件,传递参数
    //    4.2 在 跳转的目标页面的 onLoad 中, 使用 api 获取到事件通道
    //      const eventChannel = this.getOpenerEventChannel()
    //      获取到事件通道之后,绑定事件,留下回调,接收参数

    // 5.pubsub - 后面讲
    // pubsub是第三方包,使用的时候需要安装
    // 使用第三方包的步骤:
    //  1. 终端 npm  init 初始化一个 package.json 文件
    //  2. 安装依赖包
    //     npm i pubsub-js
    //  3. 点击"工具" -> "构建npm" 选项
    //     让小程序可以找到这个第三方包
    // pubsub具体使用步骤:
    // 1. 引入安装
    // 2. 接收参数的页面,绑定事件(订阅消息),留下回调,接收参数
    // 3. 发送参数的页面,触发事件(发布消息),传递参数
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow:async function () {

    const date = new Date();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    // console.log(day)

    this.setData({
      day,
      month
    })

    const result = await this.$myAxios('/recommend/songs');
    // console.log(result)

    this.setData({
      recommendList:result.recommend
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})